<script setup lang="ts">
import { defineProps } from 'vue'

const props = defineProps<{
  actions?: Array<{
    label: string
    value: string
  }>
}>()

const emit = defineEmits<{
  select: [value: string]
}>()

const handleClick = (value: string) => {
  emit('select', value)
}

// 默认快捷操作
const defaultActions = props.actions || [
  { label: '波普风电商页面', value: '波普风电商页面' },
  { label: '个人博客网站', value: '我要做一个“个人博客网站”，代码控制在20行以内即可。' },
  { label: '企业官网', value: '我要做一个“企业官网”，代码控制在20行以内即可。' },
  { label: '产品着陆页', value: '产品着陆页' }
]
</script>

<template>
  <div class="quick-actions">
    <a-button v-for="action in defaultActions" :key="action.value" type="default" @click="handleClick(action.value)">
      {{ action.label }}
    </a-button>
  </div>
</template>

<style scoped>
.quick-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .quick-actions {
    justify-content: center;
  }
}
</style>